<template>
<div class="photolist-contain"> 
  <div class="photolist-header">
    <div class="photolist-header-box">
      <div class="photolist-header-slid">
        <!-- 注意1 高亮样式itemactive判断 通过中间变量activeitemid来控制高亮
        itemactive:activeitemid===item.id
        默认要给'全部'这个分类，而'全部'的id为0，
        因此中间变量activeitemid初始值为0，点击分类时把id给activeitemid -->
       <!-- 注意2 
       绑定样式用对象方式{}时，不能使用'-',像photolist-slid-item 是不行的
       如果要使用‘-’，那么一定要加引号，像{'item-active':activeitemid===item.id}-->
       <a :class="[
         'photolistSlidItem',
         {itemactive:activeitemid===item.id}]" 
         v-for="item in catelist" :key="item.id" :href="'#/home/photolist?id='+item.id" @click="transitionName='left'">
         <span >{{item.title}} </span>
       </a>
      </div>
    </div>
  </div>
  <!-- 增加上一类和下一类的页面，获得更好的用户体验 类似jd.html的无缝轮播或拼多多和网易新闻客户端的滑动体验
  1，当前分类是0时，无上一类，当前分类时分类的最后一项时，无下一类
  2，滑动不超过屏幕1/3时，吸附回去，超过1/3时，滑动到下一类
  -->
  <!-- 图片列表数据展示  用mint-ui的懒加载组件Lazyload-->
  <div class="photocategory-outer">
    <div class="photocategory-box">
      <div class="photocategory-item"></div>
    </div>
  </div>

  <transition-group class="photo-Lazyload"  tag="ul" :name="transitionName" >
  
    <router-link v-for="item in currentImgsFilter" :key="item.id" tag="li" :to="'/home/photoinfo/'+item.id+'/'+item.title">
      <!-- 图片用懒加载方式，不能使用src，而是v-lazy指令 -->
      <img v-lazy="item.img_url">
      <!-- 文字 -->
      <div class="info">
        <div class="info-title">{{item.title}}</div>
        <div class="info-content">{{item.zhaiyao}}</div>
      </div>

    </router-link>
  
  </transition-group>
</div>
</template>

<script>
import {Toast} from 'mint-ui'
//引入滑动shoush
import swipe from '../../util/swipe.js'
export default {
  data() {
    return {
      activeitemid:parseInt(this.$route.query.id ? this.$route.query.id :0),// 激活样式控制 this.$route.query.id是字符串要转换为int类型
      catelist:JSON.parse(window.localStorage.getItem("catelist")||'[]'),//从本地图片分类列表缓存取出来的数据
      imgs:JSON.parse(window.localStorage.getItem("imgs")||'[]'),//从本地图片缓存取来的图片数据
      imgsFilter:[],//根据图片分类id过滤出的图片列表
      transitionName:'left',//动画控制 默认为从右进入，从左离开
    }
  },
  created() {
    console.log(typeof(this.activeitemid))
    
    //获取图片分类数据
    this.getImgCategory()
    // 获取图片分类为'全部'，即分类id=0的图片列表。
    // 用.$nextTick方法的回调来获取该分类的列表，让其在下一帧开始获取，就是晚一步的意思。让图片分类数据先获取完。
    this.$nextTick(()=>{
      this.getImages()
    })
    
  },
  mounted(){
    //初始化滑动事件，要在dom已经挂载完的时候进行
    this.swipephoto()
    
  
  },
  methods:{
    getImgCategory(){
      this.$axios.get('/getimgcategory').then(res=>{
        if(res.data.status===0){
          //如果数据更新，就更新本地图片分类缓存
          window.localStorage.setItem('catelist',JSON.stringify(res.data.message))
        }else{
          Toast('图片分类数据未更新...')
        }
      }).catch(err=>{
        Toast('无法连接服务器' + err)
      })
    },
    getImages(){
     //1，图片数据获取
      this.$axios.get('/getimages/').then(res=>{
        // 1.1 更新本地缓存
        if(res.data.status===0){
         //如果数据更新，就更新本地图片缓存
          window.localStorage.setItem('imgs',JSON.stringify(res.data.message))
        }else{
          //如果数据未更新，就从以前本地缓存的数据中取，并提示数据未更新。
          Toast('图片未更新...')
        }
        
      }).catch(err=>{
        Toast('无法连接服务器' + err)
      })
    },
    //定义滑动事件，绑定dom操作对象
    swipephoto(){
      
      //调用引入的模块，传入操作dom对象，左滑回调，右滑回调
      var target=document.querySelector('.photo-Lazyload')
      console.log(target)
      swipe(target, (e,distanceX)=>{
          this.transitionName='left'
          console.log(this)
          console.log(e)
          console.log('左滑手势')

         
          
          
          //就是把当前分类的id++,变成下一个分类
          this.activeitemid++
          //判断是否超过分类列表的下标。如果等于最后一个下标，就固定下来，不再加了
          if(this.activeitemid>=(this.catelist.length-1)){
            this.activeitemid=(this.catelist.length-1)
          }
          //改变浏览器的路由 必须放在if后面
          this.$router.push({'path':'?id='+this.activeitemid})
          console.log('滑动的距离',distanceX)
          // target.style.transform='translateX(-'+(375+distanceX)+'px)'
          
          //菜单栏
          var box=document.querySelector('.photolist-header')

          //菜单栏的宽度
          console.log(box.offsetWidth);
          
          //当前滑动过后的标签
          var activetager=document.querySelector('.itemactive').nextSibling
          console.log(activetager)
          // //标签宽度
          // console.log(activetager.offsetWidth)
          // //标签距离左边的宽度
          // console.log(activetager.offsetLeft)
          // console.log(activetager.scrollLeft)
          //监听动画事件
         
         
      }, (e,distanceX)=>{
          this.transitionName='right'
          // console.log(this)
          // console.log(e)
          console.log('右滑手势')
          console.log('滑动的距离',distanceX)
          this.activeitemid--
          if(this.activeitemid<=0){this.activeitemid=0}
          //改变浏览器的路由 必须放在if后面
          this.$router.push({'path':'?id='+this.activeitemid})
          var activetager=document.querySelector('.itemactive').previousSibling
          console.log(activetager)
      })
    },
    //
  },
  computed:{
    //用计算属性缓存当前点击的分类图片列表
    currentImgsFilter(){
      
      // 2.2 从缓存中根据当前激活的分类id--activeitemid过滤数组
        if(this.activeitemid===0){
          //如果是全部，即activeitemid=0，就把所有的图片都取出来，放到图片过滤列表中
          this.imgsFilter=this.imgs
        }else{
          //否则就按图片分类id--activeitemid从缓存过滤出相应的图片，只要图片的cateid数组中有一个为activeitemid即可。
          this.imgsFilter=this.imgs.filter(item=>item.cateid.some(i=>i===this.activeitemid )) 
        }
      return this.imgsFilter
    },   
  },
  //监视路由中id的变化，如果路由的id变化就把变化后的id给当前激活的id--this.activeitemid，
  //那么this.activeitemid数的变化，就会导致图片展示区中重新计算currentImgsFilter这个计算属性，
  //最大程度减少了dom操作，完全符合vue的数据驱动思想。

  watch:{
    '$route.query.id':function (newVal,oldVal) {
      console.log(newVal+'-------'+oldVal)
      this.activeitemid=parseInt(newVal)
    },
  }
  
}
</script>

<style lang='scss' scoped>
.photolist-contain{
   /*加 display: inline;这个就是升官，内联元素天生具有的，
   解决了头部子元素.photolist-header在加了position: fixed;后，切换时产生由下而上的动画的问题
   指导文章《深入理解CSS中的层叠上下文和层叠顺序》
   https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/*/
  display: inline;
  .photolist-header{
    position: fixed;
    left: 0;
    top: 40px;
    width: 100%;
    height: 42px;
    z-index: 100;
    overflow: hidden;
    background-color: rgb(224, 226, 230);
    .photolist-header-box{
      overflow-x: auto;
      overflow-y: hidden;
      .photolist-header-slid{
        display: flex;
        // justify-content:center;
        flex-wrap: nowrap; 
        a,a:hover,a:active,a:visited{
          text-decoration:none;
          // color: red;
        } 
        .photolistSlidItem{
          flex:0 0 58px;//不放大、不缩小、每个分类菜单在主轴方向占58px
          // width:58px;
          font-size: 15px;
          color:black;
          text-align: center;
          line-height: 40px;
          // border-bottom: 1px solid#ccc;
          // display: inline-block;
        }
        .itemactive{//添加激活样式
          color:blue;
          border-bottom: 2px solid blue;
        }
      }  
    }
    /*添加-webkit-scrollbar伪类隐藏滚动条，一定要加在滚动层上*/
    .photolist-header-box::-webkit-scrollbar {
        display: none;
    }
  }
  /*添加图片内容展示区切换不同分类时的过渡效果*/ 
  //添加切换过度效果，要从右进入，从左离开，不然就会打架。
	.left-enter{/*过度的两个类进入v-enter和离开 v-leave*/
		opacity: 0;
		transform: translateX(100%);/*进入移动方向，沿着x轴移动整个宽度，从右侧进入*/
		
	}
	.left-leave-to{
		opacity: 0;
		transform: translateX(-100%);/*移动方向，沿着x轴移动整个宽度，从左侧离开*/
		position: absolute;/*离开时要定义离开的位置是absolute，不然，进入会从下往上不平滑*/
	}
	.left-enter-active,.left-leave-active{
		transition: all .5s ease;/*动画时间0.5秒，容易模式*/
	}
  //右滑时的进入和离场动画
  .right-enter{/*过度的两个类进入v-enter和离开 v-leave*/
		opacity: 0;
		transform: translateX(-100%);/*进入移动方向，沿着x轴移动整个宽度，从右侧进入*/
		
	}
	.right-leave-to{
		opacity: 0;
		transform: translateX(100%);/*移动方向，沿着x轴移动整个宽度，从左侧离开*/
		position: absolute;/*离开时要定义离开的位置是absolute，不然，进入会从下往上不平滑*/
	}
	.right-enter-active,.right-leave-active{
		transition: all .2s ;/*动画时间0.5秒，容易模式*/
	}
  /*懒加载图标在加载时的样式*/
  .photo-Lazyload{
    margin-top: 42px;
    list-style: none;
    padding: 10px;
    padding-bottom: 0;//防止底部出现两个10px，因为内层li还有一个margin-bottom: 10px;
    li{
      background-color: #ccc;//因为懒加载图标是白色，所以设为灰色便于展示懒加载图标
      margin-bottom: 10px;
      text-align: center;
      box-shadow: 0 0 9px #999;//边框阴影
      position: relative;//给文字区的相对定位
      img{
        width: 100%;
        vertical-align: middle;//防止出现出现内容和背景在垂直方向上错位。
        
      }
      img[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: auto;
      }
      .info{
        background-color: rgba(224, 226, 230,0.5);
        color: white;
        text-align: left;
        position: absolute;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.4);
        max-height: 84px;//给最大高度使得不会内容多，覆盖过高
  
        .info-title {
          font-size: 16px;
        }
        .info-content {
          text-indent: 2em;//缩进2个字符
          font-size: 13px;
        }
      }
    } 
  }  
  // a:active{text-decoration:none;} 
}

</style>